<template>
    <view class="page" @click="handlePageClick">
        <view class="page">
            <!-- 返回按钮 -->
            <!-- 顶部导航 -->
            <view class="top">
                <view class="top-left">
                    <view class="top-left-back" @click="back">
                        <image src="/static/left.png" style="width: 23px;height: 23px;"></image>
                    </view>
                    <view class="top-left-title">确认挂号信息</view>
                </view>
            </view>

            <!-- 就诊人信息 -->
            <view class="choose">
                <view class="rose">
                    <view class="rose-name">{{ patientName || '加载中...' }}</view>
                    <view class="rose-choose" @click="choose">切换就诊人</view>
                </view>
                <view class="code" v-if="patientIdCard">身份证号：{{ patientIdCard }}</view>
                <view class="code" v-if="patientCard">就诊卡号：{{ patientCard }}</view>
            </view>

            <view class="message">
                <view class="name">
                    <view class="name-left">就诊人</view>
                    <view class="name-right">{{ patientName || '加载中...' }}</view>
                </view>
                <view class="house">
                    <view class="house-left">就诊科室</view>
                    <view class="house-right">内科</view>
                </view>
<!--                <view class="date">
                    <view class="date-left">就诊日期</view>
                    <view class="date-right">{{ todayDate }}</view>
                </view> -->
                <view class="doctor">
                    <view class="doctor-left">就诊医生</view>
                    <view class="doctor-right">{{ doctorName || '加载中...' }}</view>
                </view>
                <view class="local">
                    <view class="local-left">就诊地点</view>
                    <view class="local-right">门诊室一层201</view>
                    <!-- 显示已录制音频 -->
                </view>
                <view style="margin-top: 10px;margin-left: 20px;" class="audio-player" v-if="uploadedAudioUrl">
                    <audio ref="audioPlayer" :src="uploadedAudioUrl" controls autoplay title="录音播放" @play="onAudioPlay"
                        @pause="onAudioPause" @ended="onAudioEnded"></audio>
                </view>

                <view class="line"></view>
                <view class="add">
                    <view class="add-left" @click="imgadd">添加图片</view>
                    <view class="lin"></view>
                    <view class="add-right" @click="vioce">添加录音</view>
                </view>
                <!-- 显示已上传图片 -->
                <view v-if="selectedImages.length > 0" class="uploaded-images-container">
                    <view class="uploaded-images">
                        <!-- 上传的图片列表 -->
                        <view v-for="(image, index) in selectedImages" :key="index" class="image-item">
                            <view class="image-wrapper">
                                <image :src="image" mode="aspectFill" class="preview-image" />
                            </view>
                            <!-- 删除按钮 -->
                            <view @click="deleteImage(index)" class="delete-btn">
                                <image src="/static/del.png" alt="删除" style="width: 20px; height: 20px;" />
                            </view>
                        </view>
                    </view>
                    <!-- 显示当前上传数量和限制 -->
                    <view class="image-count">{{ selectedImages.length }}/3</view>
                </view>
                <!-- 文字描述文本域 -->
                <textarea v-model="text" placeholder="请输入文字描述" rows="5" cols="50"
                    style="border: none; padding: 10px;"></textarea>
            </view>


            <!-- 录音功能 -->
            <view class="black" v-if="isRecordingVisible">
                <view class="tape_box" ref="tapeBox" v-if="isRecordingVisible" @click.stop>
                    <view class="upload_box1">
                        <!-- 添加关闭图标 -->
                        <view class="" @click="closeRecording">
                            <image src="/static/can.png" style="width: 30px;height: 30px;margin-left: 300px;"
                                alt="关闭" />
                        </view>
                        <view class="upload_top">
                            <view class="upload_img_title">录音</view>
                        </view>
                        <view class="tape_calculagraph">{{ formatTime }}</view>
                        <view class="upload_pate_con">
                            <!-- 点击录音按钮 -->
                            <image @click="toggleRecording"
                                :src="isRecording ? '/static/pause.png' : '/static/start.png'"
                                style="width: 50px;height: 50px;">
                            </image>
                        </view>

                        <view class="clear_tape" @click="clearRecording" v-if="recordingAvailable">
                            清除录音
                        </view>

                        <!-- H5 平台的音频播放器 -->
                        <view v-if="recordingAvailable" class="audio-player">
                            <audio ref="h5Audio" :src="audioURL" controls autoplay title="录音" @play="onAudioPlay"
                                @pause="onAudioPause" @ended="onAudioEnded"></audio>
                        </view>
                    </view>
                </view>
            </view>


            <!-- 底部按钮 -->
            <view class="footer" style="height:45px;line-height: 45px;">
                <view class="als">
                    <view class="doc">医师服务费</view>
                    <view class="money">￥{{ doctorMoney || '20.00' }}</view>
                    <button
                        style="background-color: #00DACA;font-size:15px; height: 30px;color: white;margin-left: 90px;line-height: 30px;margin-top: 5px;"
                        @click="confirmSelection">确认</button>
                </view>
            </view>

            <!-- 切换就诊人 -->
            <view class="outerContainer" v-if="isChoosingPerson">
                <view class="choosePerson">
                    <view class="al">
                        <view class="titles">
                            切换就诊人
                        </view>
                        <view style="margin-left: 75px;" class="error" @click="error">
                            <image style="width: 20px;height: 20px;" src="/static/erroe.png" alt="" />
                        </view>
                    </view>

                    <!-- 动态渲染就诊人信息 -->
                    <view v-for="(child, index) in patientList" :key="index" @click="selectPatient(child)">
                        <view class="names">{{ child.nickname }}</view>
                        <view class="ids">就诊ID号：{{ child.code }}</view>
                        <view class="linn"></view>
                    </view>

                    <view class="addd" @click="control">
                        管理就诊人
                    </view>
                </view>
            </view>

            <!-- 上传图片 -->
            <!-- 选择图片 -->
            <view class="black" v-if="isImgAdding">
                <view class="add-img">
                    <form id="form">
                        <view class="errorr">
                            <image style="width: 30px;height: 30px;margin-left: 300px;margin-top: -10px;"
                                src="/static/can.png" alt="" @click="errorr" />
                        </view>
                        <label>
                            <image @click="selectImage()"
                                style="width: 90px;height: 90px;margin-left: 20px;margin-top: -10px;" id="pic"
                                :src="imageUrl || '/static/upload.png'" alt="上传" />
                        </label>
                    </form>
                </view>
            </view>

        </view>
    </view>
</template>


<script setup>
import {
  ref,
  onMounted,
  computed,
  nextTick
} from 'vue';
import { 
  registerAdd, 
  uploadImage,
  card // 引入就诊卡列表接口
} from '/api/index.js'; // 根据实际路径调整

const isRecordingVisible = ref(false); // 控制录音功能的显示与隐藏
const isRecording = ref(false); // 录音状态
const time = ref(0); // 录音时间
const tapeBox = ref(null); // 使用 ref 来定义引用
const isImgAdding = ref(false); // 用来控制是否显示上传图片的组件
const imageUrl = ref(''); // 用来存储上传的图片URL
const audioUrl = ref(''); // 存储上传的录音 URL
const uploadedAudioUrl = ref(''); // 用来存储上传的录音URL
const id = ref(''); // 定义科室 ID
// 定义响应式数据
const isChoosingPerson = ref(false); // 控制是否显示选择就诊人弹窗
const patientList = ref([]); // 存储就诊人列表
const doctorMoney = ref(''); // 新增：医师费用
// 在组件的适当位置添加这个常量定义
const MAX_IMAGES = 3; // 允许上传的最大图片数量
// 定义状态变量，标记数据是否加载完成
const isPatientDataLoaded = ref(false);
// 在成功后，使用 nextTick 确保更新后的数据渲染到页面
nextTick(() => {
  // 确保页面渲染了最新数据
  console.log('页面已更新');
});

// 处理页面点击事件
function handlePageClick(event) {
  if (isRecordingVisible.value) {
    if (tapeBox.value && !tapeBox.value.contains(event.target)) {
      isRecordingVisible.value = false;
    }
  }
}

// 返回上一页
const back = () => {
  uni.navigateBack()
}

const formatTime = computed(() => {
  const minutes = String(Math.floor(time.value / 60)).padStart(2, '0');
  const seconds = String(time.value % 60).padStart(2, '0');
  return `${minutes}:${seconds}`; // 正确使用模板字符串
});

// 声明 receivedData 变量
const receivedData = ref(null); // 初始化为 null
const text = ref('');
let timer = null;
let recorderManager = null;
let mediaRecorder = null;
let audioChunks = [];
let audioBlob = null;
const recordingAvailable = ref(false);
let audioURL = '';
const pauseIconAvailable = ref(true); // 控制图标是否可见

const todayDate = ref('');
const patientName = ref('');
const patientIdCard = ref('');
const patientCard = ref('');
const patientId = ref('');
const doctorName = ref('');
const receivedDate = ref('');

onMounted(() => {
  // 获取用户数据
  const userData = uni.getStorageSync('user');
  
  if (userData && userData.data) {
    console.log('用户数据:', userData);
    
    // 获取今天日期
    const currentDate = new Date();
    receivedDate.value =
      `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`;
    const date = new Date();
    todayDate.value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    
    // 获取存储的 doctor 数据
    const storedDoctorData = uni.getStorageSync('bookingData');
    console.log('医生数据:', storedDoctorData);
    
    if (storedDoctorData) {
      try {
        const doctorData = JSON.parse(storedDoctorData);
        if (doctorData && doctorData.doctor && doctorData.doctor.name) {
          doctorName.value = doctorData.doctor.name;
          receivedData.value = doctorData;
          
          // 获取医生费用
          if (doctorData.doctor.money) {
            doctorMoney.value = doctorData.doctor.money;
          }
        }
      } catch (e) {
        console.error('解析医生数据失败:', e);
      }
    }
    
    // 请求就诊卡列表
    fetchCardList(userData.data.id);
  } else {
    console.error('没有找到存储的用户数据！');
    uni.showToast({
      title: '请先登录',
      icon: 'none',
      complete: () => {
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    });
  }

  initNativeRecorder();
});

// 请求就诊卡列表
const fetchCardList = async (userId) => {
  try {
    console.log('请求就诊卡列表，用户ID:', userId);
    const response = await card({ user_id: userId });
    
    // 打印完整的响应数据
    console.log('就诊卡列表接口响应数据:', response);
    
    if (response.code === 1 && response.data && response.data.length > 0) {
      // 存储就诊卡列表
      patientList.value = response.data;
      
      // 使用第一个就诊卡信息进行渲染
      const firstCard = response.data[0];
      patientName.value = firstCard.nickname || '未命名';
      patientIdCard.value = firstCard.code || '';
      patientCard.value = firstCard.card || '';
      patientId.value = firstCard.id || '';
      
      console.log('就诊卡信息已加载:', patientName.value);
      isPatientDataLoaded.value = true;
    } else {
      console.error('获取就诊卡列表失败:', response.msg || '未知错误');
      uni.showToast({
        title: '获取就诊卡信息失败',
        icon: 'none'
      });
    }
  } catch (error) {
    console.error('请求就诊卡列表出错:', error);
    uni.showToast({
      title: '网络请求失败',
      icon: 'none'
    });
  }
};

// 切换就诊人弹窗显示
function choose() {
  isChoosingPerson.value = !isChoosingPerson.value;
}

// 点击切换就诊人后更新页面
function selectPatient(patient) {
  patientName.value = patient.nickname;
  patientIdCard.value = patient.code;
  patientCard.value = patient.card;
  patientId.value = patient.id;
  isChoosingPerson.value = false; // 关闭切换就诊人弹窗
}

// 关闭弹窗

// 初始化录音功能
function initNativeRecorder() {
  recorderManager = uni.getRecorderManager();

  if (recorderManager) {
    recorderManager.onStart(() => console.log('开始录音'));
    recorderManager.onStop((res) => {
      console.log('录音已停止', res);
      isRecording.value = false;
      clearInterval(timer);
      time.value = 0;
      recordingAvailable.value = true;
      uploadedAudioUrl.value = res.tempFilePath; // 更新录音URL
      audioURL = uploadedAudioUrl.value; // 将 audioURL 更新为录音路径
    });

    recorderManager.onError((err) => {
      console.error('录音错误', err);
      isRecording.value = false;
      clearInterval(timer);
      time.value = 0;
      uni.showToast({
        title: '请获取录音权限',
        icon: 'none'
      });
    });
  } else {
    console.error('recorderManager 未初始化');
  }
}

// 删除图片
function deleteImage(index) {
  // 从数组中移除图片
  selectedImages.value.splice(index, 1);
}

// 检查并请求录音权限
function checkRecordingPermission() {
  uni.authorize({
    scope: 'scope.record',
    success() {
      startRecording();
    },
    fail() {
      uni.showModal({
        title: '权限请求',
        content: '录音功能需要您的授权，请开启录音权限。',
        showCancel: false,
        confirmText: '去设置',
        success(res) {
          if (res.confirm) {
            uni.openSetting({
              success: (settingRes) => {
                if (settingRes.authSetting['scope.record']) {
                  startRecording();
                } else {
                  uni.showToast({
                    title: '未授权录音权限',
                    icon: 'none'
                  });
                }
              }
            });
          }
        }
      });
    }
  });
}

// 开始录音
function startRecording() {
  if (isRecording.value || !recorderManager) return; // 确保 recorderManager 已初始化
  recorderManager.start({
    format: 'mp3'
  });
  isRecording.value = true;
  time.value = 0;
  timer = setInterval(() => {
    time.value++;
  }, 1000);
}

// 停止录音
function stopRecording() {
  if (recorderManager) {
    recorderManager.stop();
  } else {
    console.error('recorderManager 未初始化');
  }
}

// 切换录音状态
function toggleRecording() {
  if (isRecording.value) {
    stopRecording();
  } else {
    checkRecordingPermission(); // 检查权限并开始录音
  }
}

// 清除录音
function clearRecording() {
  recordingAvailable.value = false;
  audioURL = '';
}

// 添加图片功能
function imgadd() {
  if (imageUrl.value) {
    // 如果图片URL存在，则添加到 selectedImages 数组中
    selectedImages.value.push(imageUrl.value); // 使用 push 来添加新图片
    imageUrl.value = ''; // 清空临时图片URL
    isImgAdding.value = false; // 隐藏图片上传区域
  } else {
    // 如果没有图片，显示上传图片的区域
    isImgAdding.value = true;
  }
}

function control() {
  console.log(11);
  uni.navigateTo({
    url: '/pages/patient/patient'
  })
}

function vioce() {
  isRecordingVisible.value = !isRecordingVisible.value;
}

function error() {
  isChoosingPerson.value = false;
}

// 关闭录音框
function closeRecording() {
  isRecordingVisible.value = false;
}

const selectedImages = ref([]); // 确保是一个数组
// 定义 showImageDrawer
const showImageDrawer = ref(false);

// 从相册选择图片（修改后的方法）
function selectImage() {
  // 检查是否已达到最大上传数量
  if (selectedImages.value.length >= MAX_IMAGES) {
    uni.showToast({
      title: `最多只能上传${MAX_IMAGES}张图片`,
      icon: 'none'
    });
    return;
  }
  
  // 计算还能上传的图片数量
  const count = MAX_IMAGES - selectedImages.value.length;
  
  uni.chooseImage({
    count: count, // 只允许选择剩余可上传的数量
    success: (res) => {
      // 将选中的图片添加到数组中
      selectedImages.value = [...selectedImages.value, ...res.tempFilePaths];
    },
    fail: (err) => {
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      });
    }
  });
}

// 清除图片上传区域
function errorr() {
  isImgAdding.value = false;
  imageUrl.value = ''; // 清空图片URL
}

// 上传录音文件，使用与上传图片相同的接口
async function uploadAudio(audioPath) {
  try {
    console.log('开始上传录音:', audioPath);
    const result = await uploadImage(audioPath);
    console.log('录音上传成功，服务器返回路径:', result.url);
    return result;
  } catch (error) {
    console.error('录音上传失败:', error);
    throw error;
  }
}

// 点击确认按钮时执行的操作
const confirmSelection = () => {
  // 这里先检查就诊人信息是否正确渲染
  nextTick(() => {
    console.log('Patient Name:', patientName.value); // 调试输出
    console.log('Patient ID:', patientId.value); // 调试输出
    // 只要 patientName 或 patientId 为空或为 undefined，就提示添加就诊人
    if (!patientName.value) {
      uni.showToast({
        title: '请先添加就诊人',
        icon: 'none'
      });
      return;
    }

    // 检查其他必要字段
    if (text.value !== '' && (selectedImages.value.length > 0 || uploadedAudioUrl.value !== '')) {
      if (!receivedData.value) {
        uni.showToast({
          title: '医生数据缺失',
          icon: 'none'
        });
        return;
      }

      // 获取本地存储中的用户ID
      const userData = uni.getStorageSync('user');
      const userId = userData && userData.data && userData.data.id;
      
      if (!userId) {
        uni.showToast({
          title: '用户信息缺失',
          icon: 'none'
        });
        return;
      }

      // 创建一个上传任务数组
      const uploadPromises = [];
      
      // 添加图片上传任务
      selectedImages.value.forEach(imgPath => {
        uploadPromises.push(uploadImage(imgPath).then(result => {
          console.log('图片上传成功，服务器返回路径:', result.url);
          return result;
        }));
      });
      
      // 添加录音上传任务（如果有）
      if (uploadedAudioUrl.value) {
        uploadPromises.push(uploadAudio(uploadedAudioUrl.value));
      }
      
      // 并行执行所有上传任务
      Promise.all(uploadPromises)
        .then(uploadResults => {
          // 过滤出图片和录音的上传结果
          const imageResults = uploadResults.filter(result => {
            // 假设图片上传结果有特定的标识或扩展名
            return result.url && (result.url.endsWith('.jpg') || result.url.endsWith('.png') || result.url.endsWith('.jpeg'));
          });
          
          const audioResults = uploadResults.filter(result => {
            // 假设录音上传结果有特定的标识或扩展名
            return result.url && (result.url.endsWith('.mp3') || result.url.endsWith('.wav') || result.url.endsWith('.ogg'));
          });
          
          // 构建图片路径字符串
          const uploadedImgPaths = imageResults.map(result => result.url).join(',');
          
          // 获取录音路径（如果有）
          const uploadedAudioPath = audioResults.length > 0 ? audioResults[0].url : '';
          
          console.log('所有文件上传完成');
          console.log('上传的图片路径:', uploadedImgPaths);
          console.log('上传的录音路径:', uploadedAudioPath);
          
          // 进行预约请求
          return registerAdd({
            user_id: userId, // 使用本地存储中的用户ID
            card: patientCard.value, // 使用页面渲染的就诊卡号
            depart_id: 5, // 使用bookingData中的科室ID
            doctor_id: 106, // 使用bookingData中的医生ID
            price: receivedData.value.doctor.money, // 使用bookingData中的医生费用
            trends: text.value, // 使用用户填写的文字描述
            img: uploadedImgPaths, // 使用上传后的图片路径
            audio: uploadedAudioPath, // 使用上传后的录音路径
            status: 1,
            create_time: '2025-03-13', // 使用当前日期
            time: 1,
            reset_content: '1'
          });
        })
        .then(res => {
          console.log('原始响应数据:', res); // 打印原始响应数据
          
          // 直接从res对象获取code和msg
          const responseCode = res.code;
          const responseMsg = res.msg;
          
          console.log('解析后的code:', responseCode);
          console.log('解析后的msg:', responseMsg);
          
          // 检查code是否为1
          const successCode = responseCode === 1;
          console.log('是否成功:', successCode);
          
          if (successCode) {
            // 成功状态码（code=1）跳转至成功页
            const successMsg = responseMsg || '预约成功';
            console.log('成功消息:', successMsg);
            
            // 存储病人姓名到本地缓存
            uni.setStorageSync('patientName', patientName.value);
            console.log('病人姓名已存储:', patientName.value);
            
            uni.showToast({
              title: successMsg,
              icon: 'success'
            });
            
            setTimeout(() => {
              uni.navigateTo({
                url: '/pages/success/success',
              });
            }, 1500);
          } else {
            // 非成功状态码，显示错误信息
            const errorMsg = responseMsg || '预约失败，请重试';
            console.log('错误消息:', errorMsg);
            
            uni.showToast({
              title: errorMsg,
              icon: 'none'
            });
            console.error('预约失败:', errorMsg);
          }
        })
        .catch(err => {
          uni.showToast({
            title: '网络请求失败，请稍后再试',
            icon: 'none'
          });
          console.error('请求失败', err);
        });
    } else if (text.value === '') {
      uni.showToast({
        title: '请填写文字描述',
        icon: 'none'
      });
    } else if (selectedImages.value.length === 0 && uploadedAudioUrl.value === '') {
      uni.showToast({
        title: '请选择图片或录制音频',
        icon: 'none'
      });
    }
  });
};
</script>

<style scoped>
    .uploaded-images {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 5px 0;
        -webkit-overflow-scrolling: touch; /* 增强iOS滚动体验 */
    }

    .image-item {
        position: relative;
        margin: 0 5px; /* 减小图片间距 */
        flex-shrink: 0; /* 防止图片被压缩 */
    }

    .image-wrapper {
        width: 90px;
        height: 90px;
        overflow: hidden;
        border-radius: 4px;
        background-color: #f5f5f5;
    }

    .preview-image {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 保持图片比例，裁剪超出部分 */
    }

    .delete-btn {
        position: absolute;
        top: -5px;
        right: -5px;
        width: 20px;
        height: 20px;
        background-color: rgba(0, 0, 0, 0.6);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        cursor: pointer;
    }

    .uploaded-images-container {
        margin: 10px 0;
        position: relative;
    }

    .image-count {
        position: absolute;
        right: 10px;
        bottom: -20px;
        font-size: 12px;
        color: #999;
    }

    /* 自定义滚动条样式 */
    .uploaded-images::-webkit-scrollbar {
        height: 4px;
    }

    .uploaded-images::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 4px;
    }

    .uploaded-images::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 4px;
    }

    .uploaded-images::-webkit-scrollbar-thumb:hover {
        background: #bbb;
    }

    /* 其他样式保持不变... */
    .tape_box {}

    #page-title {
        top: 0;
        font-size: 21px;
    }

    .upload_box1 {
        margin-left: -30px;
    }

    .tape_box {
        position: fixed;
        bottom: 0px;
        /* 这里改为50px */
        width: 100%;
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        text-align: center;
    }

    .upload_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .upload_img_title {
        flex: 1;
        text-align: center;
        font-size: 18px;
        font-weight: bold;
    }

    .tape_calculagraph {
        margin: 10px 0;
        font-size: 24px;
        font-weight: bold;
    }

    .upload_pate_con image {
        width: 50px;
        height: 50px;
        cursor: pointer;
    }

    .clear_tape {
        margin-top: 10px;
        font-size: 14px;
        color: red;
        cursor: pointer;
    }

    .audio-player {
        margin-top: 20px;
    }

    .audio-player audio {
        width: 100%;
        margin-top: 10px;
    }

    .top {
        background-color: #00daca;
        width: 100%;
        height: 12rem;
        color: white;
        font-size: 21px;
        line-height: 3rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        padding-left: 15px;
    }

    .top-item {
        display: flex;
        align-items: center;
    }

    .top-item image {
        width: 16px;
        height: 16px;
        margin-right: 10px;
    }

    /* 关闭图标样式 */
    .close-icon {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    .close-icon image {
        width: 100%;
        height: 100%;
    }

    /* 切换就诊人 */
    .choose {
        width: 94%;
        margin-left: 3%;
        height: 100px;
        background-color: white; /* 浅绿色背景 */
        margin-top: -40px;
        border-radius: 10px;
        position: fixed;
    }

    .rose {
        margin-top: 20px;
        /* margin-left: 15px; */
        display: flex;
        justify-content: space-between;
        width: 92%;
        margin-left: 5%;
    }

    .rose-choose {
        width: 80px;
        height: 30px;
        background-color: #00daca;
        font-size: 14px;
        color: white;
        text-align: center;
        border-radius: 5px;
        line-height: 30px;
    }

    .card {
        width: 92%;
        margin-left: 5%;
        color: #bababa;
    }

    .code {
        width: 92%;
        margin-left: 5%;
        color: #333; /* 修改为深色文本以便在绿色背景上显示更清晰 */
        margin-top: 2px;
    }

    /* 就诊人信息 */
    .message {
        width: 94%;
        margin-left: 3%;
        background-color: white;
        margin-top: 115px; /* 调整位置，因为上面的区域变大了 */
        border-radius: 5px;
        position: fixed;
    }

    .add-left {
        font-size: 18px;
        margin-top: 5px;
    }

    .add-right {
        font-size: 18px;
        margin-top: 5px;
    }

    .lin {
        height: 60px;
        width: 1px;
        background-color: #d5d5d5;
        margin-top: -10px;
    }

    .name {
        display: flex;
        justify-content: space-between;
        width: 94%;
        margin-left: 3%;
        margin-top: 15px;
        color: #6d6d6d;
    }

    .house {
        display: flex;
        justify-content: space-between;
        width: 94%;
        margin-left: 3%;
        margin-top: 10px;
        color: #6d6d6d;
    }

    .date {
        display: flex;
        justify-content: space-between;
        width: 94%;
        margin-left: 3%;
        margin-top: 10px;
        color: #6d6d6d;
    }

    .doctor {
        display: flex;
        justify-content: space-between;
        width: 94%;
        margin-left: 3%;
        margin-top: 10px;
        color: #6d6d6d;
    }

    .local {
        display: flex;
        justify-content: space-between;
        width: 94%;
        margin-left: 3%;
        margin-top: 10px;
        color: #6d6d6d;
    }

    .vioce {
        display: flex;
        justify-content: space-between;
        width: 94%;
        margin-left: 3%;
        margin-top: 10px;
        color: #6d6d6d;
    }

    .line {
        width: 100%;
        height: 0.5px;
        background-color: #d5d5d5;
        margin-top: 10px;
    }

    .add {
        display: flex;
        justify-content: space-between;
        width: 62%;
        margin-left: 20%;
        margin-top: 10px;
        color: #6d6d6d;
    }

    /* 切换就诊人 */
    .choosePerson {
        position: fixed;
        bottom: 0;
        background-color: #ffffff;
        width: 100%;
        height: auto;
        min-height: 200px;
    }

    .outerContainer {
        position: fixed;
        bottom: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        /* 黑色半透明背景 */
    }

    .titles {
        margin-left: 155px;
    }

    .al {
        display: flex;
        height: 50px;
        background-color: #00daca;
        text-align: center;
        color: white;
        line-height: 50px;
        font-size: 20px;
        font-weight: 500;
        display: flex;
    }

    .error {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        background-color: white;
        margin-top: 14px;
        margin-left: 110px;
        display: flex;
        /* 使用 flexbox 使内容居中 */
        align-items: center;
        /* 垂直居中对齐 */
        justify-content: center;
        /* 水平居中对齐 */
    }

    .error img {
        width: 16px;
        height: 16px;
    }

    /* 名字 */
    .names {
        color: black;
        font-size: 20px;
        color: #383838;
        margin-left: 15px;
        margin-top: 15px;
    }

    .ids {
        color: #747474;
        font-size: 15px;
        color: #676767;
        margin-left: 15px;
        margin-top: 2px;
    }

    /* 线 */
    .linn {
        width: 100%;
        height: 1px;
        background-color: #d5d5d5;
        margin-top: 15px;
    }

    /* 管理就诊人 */
    .addd {
        display: flex;
        justify-content: center;
        color: #00daca;
        font-size: 20px;
        margin-top: 15px;
        margin-bottom: 20px;
    }

    .footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        background-color: white;
        padding: 10px;
    }

    .als {
        display: flex;
        margin-left: 25px;
        color: #383838;
    }

    .money {
        margin-left: 20px;
        color: orangered;
    }

    .confirm {
        width: 112px;
        height: 35px;
        background-color: #00daca;
        color: white;
        line-height: 35px;
        border-radius: 5px;
        text-align: center;
        font-size: 15px;
        margin-left: 120px;
        margin-top: 8px;
    }

    .controls {
        display: flex;
        /* align-items: center; */
        justify-content: center;
        gap: 20px;
        margin-left: -42px;
    }

    .recording-controls {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn {
        border: none;
        border-radius: 50%;
        padding: 20px;
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .btn:hover {
        background-color: #e65c00;
        /* 深橙色 */
    }

    .btn:disabled {
        background-color: #ccc;
        cursor: not-allowed;
    }



    .btn.btn-cancel {
        background: none;
        font-size: 15px;
        border: none;
        cursor: pointer;
        margin-top: 113px;
        padding: 0;
    }

    #timer {
        font-size: 15px;
        margin-top: 30px;
    }

    .btn.btn-upload {
        background: none;
        font-size: 12px;
        position: absolute;
        top: -12px;
        right: -12px;
        border: none;
        cursor: pointer;
    }

    audio {
        margin-top: 20px;
    }



    /* 外层的圆形 */
    .btn-wrapper {
        position: relative;
        display: inline-block;
    }

    /* 白色圆形的样式 */
    .btn-wrapper .btn-background {
        margin-top: 20px;
        position: absolute;
        top: -3px;
        left: -3.5px;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        background-color: white;
        border: 1px solid #ff6600;
        z-index: 0;
    }

    /* 橙色按钮的样式 */
    .btn.btn-recording {
        margin-top: 20px;
        background-color: #ff6600;
        color: white;
        width: 50px;
        height: 50px;
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1;
        /* 确保橙色按钮在白色圆形上层 */
    }

    .click {
        font-size: 14px;
        color: #3b3b3b;
        margin-top: 35px;
    }

    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(167, 167, 167, 0.5);
        z-index: 1000;
        display: none;
    }

    .container {
        text-align: center;
        position: absolute;
        /* 确保容器定位在遮罩层上层 */
        bottom: 0;
        /* 距离底部为 0 */
        width: 100%;
        /* 使容器宽度适应屏幕 */
        z-index: 1010;
        /* 确保容器在遮罩层之上 */
        background-color: #ffffff;
        /* 可以设置背景颜色以增强对比度 */
        padding: 20px;
        /* 增加内边距以避免内容紧贴底部 */
        box-sizing: border-box;
        /* 确保内边距包含在宽度和高度中 */
        height: 30%;
    }

    /* 添加图片 */
    .black {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(167, 167, 167, 0.5);
        z-index: 1000;
    }

    .add-img {
        width: 100%;
        height: 20%;
        background-color: white;
        position: fixed;
        bottom: 0;
        /* 确保图片上传区域位于底部 */
    }


    /* 头像 */
    #form {
        margin-left: 20px;
        margin-top: 7%;
    }

    .uponld {
        width: 90px;
        height: 90px;
        overflow: hidden;
        object-fit: cover;
        margin-top: -20px;
    }

    .errorr img {
        width: 30px;
        height: 30px;
        margin-left: 350px;
        margin-top: -30px;
    }

    .new {
        height: 180px;
        overflow: hidden;
        overflow-y: scroll;
    }
</style>    
